<script setup>
import { ref, onMounted,toRaw} from 'vue';
import Hh from './Hh.vue';
import axios from 'axios';
let optype = ref('new');
let title = ref('添加菜单');
let list = ref([]);
let input = ref('')
let hhe = ref({id:'',one:'',two:'',three:'',four:''})
let isFlipped = ref(false);
let isFlipped1 = ref(false);
let isFlipped2 = ref(false);
let isFlipped3 = ref(false);
let addshow = ref(false);
let show1 = ref(true);
let show2 = ref(true);
let show3 = ref(true);
let show4 = ref(true);
function getData(){
    axios.get('/api/fan_list').then(res =>{
        console.log(res);
        if(res.data.status==200){
            list.value = res.data.data;
        }else{
            showMsg("获取数据失败",'error',2000);
        }
    })
} 
onMounted(() => {
  getData();
});
 function handleFlip(){
  isFlipped.value = !isFlipped.value;
  let fes=toRaw(list.value);
  let sy=fes[0].one
  if(sy===input.value){
    show1.value = false;
  }else{
    setTimeout(()=>{
     isFlipped.value=false
    },500)
  }
};

function handleFlip1(){
  isFlipped1.value = !isFlipped1.value;
  let fes=toRaw(list.value);
  let sy=fes[0].two
  if(sy==input.value){
    show2.value = false;
  }else{
    setTimeout(()=>{
     isFlipped1.value=false
    },500)
  }
};

function handleFlip2(){
  isFlipped2.value = !isFlipped2.value;
  let fes=toRaw(list.value);
  let sy=fes[0].three
  if(sy==input.value){
    show3.value = false;
  }else{
    setTimeout(()=>{
     isFlipped2.value=false
    },500)
  }
};

function handleFlip3(){
  isFlipped3.value = !isFlipped3.value;
  let fes=toRaw(list.value);
  let sy=fes[0].four
  if(sy==input.value){
    show4.value = false;
  }else{
    setTimeout(()=>{
     isFlipped3.value=false
    },500)
  }
};
function newhh(){
  addshow.value = false;
  getData();
};
  function news() {
  addshow.value = true;
};
</script>
<template>
    <el-input v-model="input" style="width: 240px" placeholder="Please input" class="input" />
   <Hh :title="title" :list2="list"  :type="optype" :hhe="hhe" v-show="addshow" @submit="newhh" @close="addshow=false" style="position: absolute;"></Hh>
   
   <div class="tool">
            <button @click="news">添加</button>
  </div>
     <div id="app">
    <div class="card" :class="{ 'flipped': isFlipped }" v-for="item in list" @click="handleFlip" >
      <div class="card1 card2">
        水果
      </div>
      <div class="card1 card3"  v-show="show1">
       {{ item.one }}
      </div>
    </div>
    <div class="card" :class="{ 'flipped': isFlipped1 }" v-for="item in list" @click="handleFlip1">
      <div class="card1 card2" >
        水果
      </div>
      <div class="card1 card3" v-show="show2">
      {{ item.two }}
      </div>
    </div>
    <div class="card" :class="{ 'flipped': isFlipped2 }" v-for="item in list" @click="handleFlip2">
      <div class="card1 card2" >
        水果
      </div>
      <div class="card1 card3" v-show="show3">
        {{ item.three}}
      </div>
    </div>
    <div class="card" :class="{ 'flipped': isFlipped3 }" v-for="item in list" @click="handleFlip3">
      <div class="card1 card2" >
        水果
      </div>
      <div class="card1 card3" v-show="show4">
        {{ item.four }}
      </div>
    </div>
  </div>
</template>
<style scoped>
#app{
    display: flex;
    flex-direction: row;
}
 .card {                                                         
  display: flex;
  flex-direction: row;
  width: 200px;
  height: 200px;
  perspective: 1000px;
  position: relative;
  margin: 50px auto;
}
.card1{
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
  transition: transform 0.6s;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  color: white;
}

.card2 {
  background-color: #4CAF50;
}

.card3 {
  background-color: #f44336;
  transform: rotateY(180deg);
}

.flipped .card2 {
  transform: rotateY(180deg);
}

.flipped .card3{
  transform: rotateY(0deg);
}
.input{
  position: absolute;
  left: 50%;
  
}
</style>